<template>
  <div class="box">
    <div class="left" ref="topEchart"></div>
    <div class="right">
      <h1>今日会员消费占比</h1>
      <img src="../../../assect/imgs/images/images/ball_03.jpg" alt />
      <h2>
        <span></span>会员消费占比40.7%
      </h2>
      <h3>
        <span></span>非会员消费占比59.3%
      </h3>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.loadEch();
  },
  methods: {
    loadEch() {
      var mycahrt = echarts.init(this.$refs.topEchart);
      mycahrt.setOption({
        color: ["#ECD638", "#16DFFF", "#EA1E79"], //设置系列的颜色
        title: {
          text: "诊所收入趋势"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "red"
            }
          }
        },

        legend: {
          right: 0,
          //图例
          data: ["近七天", "近30天", "近一月平均"]
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
            // restore: {}
          }
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true
            //   data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "近七天",
            type: "line",
            // stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(150,230,56,1)"
                },
                {
                  offset: 1,
                  color: "rgba(236,180,56,1)"
                }
              ])
            },
            emphasis: {
              focus: "self"
            },
            data: [2899, 3216, 1666, 4552, 3020, 2656, 5654]
          },
          {
            name: "近30天",
            type: "line",
            // stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(80,223,255)"
                },
                {
                  offset: 1,
                  color: "rgb(22,110,255)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [1200, 3512, 5988, 3455, 1655, 4230, 2655]
          },
          {
            name: "近一月平均",
            type: "line",
            // stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(180,40,121)"
                },
                {
                  offset: 1,
                  color: "rgb(234,30,121)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [1455, 2866, 4230, 2966, 1432, 3655, 2488]
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 420px;
  display: flex;
  padding: 15px;
  justify-content: space-between;

  .left {
    height: 100%;
    width: 66%;
    background: #ffffff;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0px 0px 30px #c8c9db;
  }
  .right {
    width: 29%;
    height: 100%;
    background: #ffffff;
    margin-right: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px #c8c9db;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h1 {
      color: #909090;
      font-size: 24px;
      margin-right: 160px;
      margin-top: 0px;
      margin-bottom: 30px;
    }
    img {
      width: 60%;
      margin-bottom: 20px;
    }
    h2,
    h3 {
      color: #909090;
      font-size: 12px;
      margin-bottom: 5px;
    }
    h2 span {
      background: #5ca9dd;
      height: 12px;
      width: 12px;
      display: inline-block;
      border-radius: 99%;
      margin-right: 5px;
    }
    h3 span {
      background: #4763ad;
      height: 12px;
      width: 12px;
      display: inline-block;
      border-radius: 99%;
      margin-right: 5px;
    }
  }
}
</style>